<template>
	
	<el-container>
		<el-header class="admin-headers">
			<div class="headers">
				<div class="logo">
					<img src="../assets/image@1x.png" alt=""/>
				</div>
			</div>
		</el-header>
		<el-main>
			<div class="login-title">
				<div>学员登录</div>
			</div>
			<div class="login-main">
				<div class="login-left">
					<img src="../../PlayEdu_files/banner-ef68003c.png" alt="">
				</div>
				<div class="login-right">
					<div class="login-box">
						<div class="login-item">
							<input v-model="username" class="login-input" placeholder="请输入邮箱或账号"/>
						</div>
						<div class="login-item">
							<input type="password" v-model="password" class="login-input" placeholder="请输入密码"/>
						</div>
						<div class="login-item">
							<button @click="handleLogin" class="login-button">立即登录</button>
						</div>
					</div>
				</div>
			</div>
		</el-main>
		<el-footer>
			<div class="d1">
				<img src="../assets/LOGO@1x.png" alt="">
			</div>
		</el-footer>
	</el-container>
	
	
</template>

<script>
	export default{
		data(){
			return {
				username:"",
				password:"",
			}
		},
		methods:{
			handleLogin(){
				if(this.username.length < 4 || this.password.length < 4){
					this.$message.warning("请输入用户名或密码")
				}else{
					
					// 保存token到本地存储
					localStorage.setItem('token',"123")
					// 设置token
					this.$store.commit('setToken',"123")
					this.$store.commit('setUsername',"wasdfghjkl")
					// 登录成功提示
					this.$message.success("登录成功")
					// 跳转到首页
					this.$router.push('/admin/home')
					
					
					// const _this = this
					// this.$request.post('login/index', {
					//     username: this.username,
					//     password: this.password
					//   })
					//   .then(function (response) {
					//     console.log('token',response.token);
					// 	// 保存token到本地存储
					// 	localStorage.setItem('token',response.token)
					// 	// 设置token
					// 	_this.$store.commit('setToken',response.token)
					// 	_this.$store.commit('setUsername',response.username)
					// 	// 登录成功提示
					// 	_this.$message.success("登录成功")
					// 	// 跳转到首页
					// 	_this.$router.push('/admin/home')
					//   })
					//   .catch(function (error) {
					//     console.log(error);
					//   });
				}
			},
		}
	}
</script>

<style>
	.admin-headers{
		box-shadow: 0 5px 10px -5px rgba(0,0,0,10%);
	}
	.headers{
		width: 1200px;
		margin: 0 auto;
		display: flex;
	}
	.headers .logo {
		width: 200px;
		padding: 7px;
	}
	.headers .logo img {
		width: 144px;
		height: 46px;
	}
	.login-main{
		width: 1200px;
		margin: 50px auto;
		display: flex;
	}
	.login-main .login-left img {
		width: 500px;
	}
	.login-main .login-left {
		flex: 1;
	}
	.login-main .login-right {
		flex: 1;
	}
	.login-box {
		padding: 25px;
	}
	.login-item .login-input {
		width: 400px;
		height: 54px;
		background-color: #f6f6f6;
		border: 1px solid #d9d9d9;
		border-radius: 6px;
		margin: 25px 0;
	}
	.login-item .login-button {
		width: 400px;
		height: 54px;
		background-color: #ff4d4f;
		border-radius: 6px;
		margin: 25px 0;
		border: 0;
		font-size: 18px;
		color: #FFFFFF;
	}

	.login-title{
		text-align: center;
		display: flex;
	}
	.login-title  div{
		color: #333333;
		font-size: 38px;
		border-bottom: 4px solid #ff4d4f;
		width: 160px;
		margin: 50px auto;
	}
	.d1{
		margin-left: 600px;
	}
</style>